<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity" :events="marker.events" :key="marker.id"> 
      </el-amap-circle-marker>
    </el-amap>
    <!-- 按钮 -->
    <div class="yj-btn">
      <div class="model-btn">
        <button @click="dialog_2=true"><i class="iconfont icon-yujing"></i>水质预警</button>
        <button><i class="iconfont icon-yujing"></i>水位预警</button>
        <button><i class="iconfont icon-yujing"></i>河湖生态系统健康评价预警</button>
        <button><i class="iconfont icon-yujing"></i>水污染突发事件智能预警</button>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <div class="dialog-wrap">
      <el-dialog title="水质预警" :visible.sync="dialog_2" width="30%">
        <table class="moni_table">
          <tr>
            <th>预警时间</th>
            <td>{{warnData.time}}</td>
          </tr>
          <tr>
            <th>预警地点</th>
            <td>{{warnData.addr}}</td>
          </tr>
          <tr>
            <th>经度</th>
            <td>{{warnData.jd}}</td>
          </tr>
          <tr>
            <th>纬度</th>
            <td>{{warnData.wd}}</td>
          </tr>
          <tr>
            <th>所处河段</th>
            <td>{{warnData.schd}}</td>
          </tr>
          <tr>
            <th>预警内容</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
        </table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        zoom: 13,
        center: [106.55,29.57],
        plugin: ['ToolBar','Scale',{
            pName: 'MapType',
            defaultType: 1,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }],
        markers: [{
          id:1,
          center: [106.55,29.57],
          radius: 20,
          fillOpacity: 1,
          fillColor: 'rgba(0,0,255,1)',
          events: {
            click: () => {
              //alert('click');
              //this.equVisibile=true
            }
          }
        }],      
        // 弹窗信息
        dialog_2:false, 
        warnData:{
          time:'2018/1/1 12:25:30',
          addr:'（设备或部件名称）',
          jd:'118E',
          wd:'29n',
          schd:'长江上游段',
          yjnr:'(如水质等级低于4级)'
        },
      }
    },
    methods:{

    }
  };
</script>
<style>
.amap-page-container {
  height:100%;
}
</style>
